<script setup lang="ts">
import { computed } from 'vue'
import { ageFromDate, availableDateStr } from '../../utils'
const props = defineProps<{ data: Profile }>()
const age = computed((): string => {
    if (props.data) {
        if (typeof (props.data.birthday) == "number") {
            return props.data.birthday + ''
        } else {
            return ageFromDate(props.data.birthday, 1) + '';
        }
    } else {
        return '';
    }
})

</script>
<template>
    <div v-if="data">
        <div class="body">
            <div class="name">
                <div>{{ data.name }}</div>
            </div>
            <div class="ri">
                <span
                    v-if="data.availability"
                >{{ availableDateStr(data.availability.availableDate) }}可驻场</span>
            </div>
        </div>
        <div class="introduction">
            <div v-if="data.cost">
                费用标准：
                <span>{{ (data.cost.amount).toLocaleString() }}元</span>
                <span>{{ (data.cost && data.cost.unit) == 'PerManMonth' ? '/人月' : (data.cost && data.cost.unit) == 'PerManDay' ? '/人天' : '/人小时' }}</span>
            </div>
            <div>
                职&emsp;&emsp;位：
                <span v-if="data.profession">{{ data.profession.occupation }}</span>
            </div>
            <div>
                年&emsp;&emsp;龄：
                <span>{{ data.age }}岁</span>
            </div>
            <div>
                学&emsp;&emsp;历：
                <span>{{ data.education && data.education.diploma }}</span>
            </div>

            <div>
                工作经验：
                <span v-if="data.profession">{{ data.profession.experience }}年</span>
            </div>
        </div>
    </div>
</template>
<style scoped>
img {
    width: 100%;
}
.body {
    display: flex;
    flex-direction: row;
    flex: 8;
    border-bottom: solid 1px lightgray;
    border-left: solid 20px red;
}
.name {
    font-size: 30px;
    margin: 16px;
    color: black;
    flex: 5;
}
.age {
    line-height: 40px;
    margin: 20px;
}

.introduction {
    font-weight: bold;
    padding: 0px 24px;
    line-height: 2;
    color: #505050;
    font-size: 16px;
}

.ri {
    color: white;
    background-color: #fd9904;
    line-height: 40px;
    margin: 20px;
    border-radius: 5px;
    padding: 0px 2px;
    flex: 3;
    text-align: center;
}
</style>